@import "common";
@import "reset";
#nav > li{
    height:38px;
    width:115px;
    float:left;  
    line-height:38px;
    font-size:14px;
    font-weight:600; 
    text-align:center;
    &:hover a{
        color:#008842;
    }
    a{
        color:#000;
    }
}
#nav{
    width:1200px;
    height:37px;
    border-bottom:1px solid #008842;
    margin:0 auto;
    position:relative;
    #list{
        width:180px;
        background:#008842;
        color:#fff;
        position:relative;
        z-index:7;
        .hide{
            display:none;
        }
        #list1{
            height:100%;
            width:100%;
            font-size:15px;
            display:inline-block;
            i{
                display:inline-block;
                height:0;
                width:0;
                border-top:10px solid #fff;
                border-left:5px solid transparent;
                border-right:6px solid transparent;
                border-bottom:none;
                margin-left:2px;
            }
        }
        ul{
            width:180px;
            background:rgba(255,255,255,0.95);
            position:absolute;  
            left:0;
            top:38px;
            display:none;
            li{
                height:42px;
                span{
                    display:inline-block;
                    height:35px;
                    width:46px;
                    float:left;
                    background:url(../img/floor_guide.png) no-repeat;
                }
                p{
                    display:inline-block;
                }
                a{
                    float:left;
                    display:inline-block;
                    padding:3px 0 0 7px;
                    color:#000;
                    font-weight:100;
                    font-family:"微软雅黑";
                    position:relative;
                    b{
                        height:40px;
                        width:26px;
                        text-align:left;
                        background:#fff;
                        position:absolute;
                        left:153px;
                        top:0;
                        z-index:20;
                        display:none;
                    }
                }
                div{
                    height:490px;
                    width:180px;
                    border:1px solid #bbb;
                    position:absolute;
                    left:179px;
                    top:-38px;
                    padding:8px 55px 0 20px;
                    background:rgba(255,255,255,0.95);
                    display:none;
                    text-align: left;
                    h3{
                        font-size:18px;
                        line-height:44px;
                        width:180px;
                        a{
                            font-size:18px;
                            line-height:44px;
                            color:#008842;
                            text-decoration:underline;
                            padding:0;
                            margin:0;
                        }
                    }
                    a{
                        float:none;
                        margin-right:32px;
                        padding:0;
                        color:#000;
                        line-height:24px;
                        font-size:12px;
                    }
                    a:hover{
                        color:#008842;
                    }
                    img{
                        position:absolute;
                        top:268px;
                        left:20px;
                    }
                }  
            }
            li:hover{
                height:40px;
                border:1px solid #bbb;
                border-right:none;
                background:#fff;
                a{
                    padding-top:2px;
                    b{
                        display:inline-block;
                    }
                }
                div{
                    display:block;
                }
            }
            li:nth-of-type(2) span{
                background-position:-40px 0;
            }
            li:nth-of-type(3) span{
                background-position:-80px 0;
            }
            li:nth-of-type(4) span{
                background-position:-120px 0;
            }
            li:nth-of-type(5) span{
                background-position:-440px 0;
            }
            li:nth-of-type(6) span{
                background-position:-200px 0;
            }
             li:nth-of-type(7) span{
                background-position:-240px 0;
            }
             li:nth-of-type(8) span{
                background-position:-280px 0;
            }
             li:nth-of-type(9) span{
                background-position:-320px 0;
            }
             li:nth-of-type(10) span{
                background-position:-360px 0;
            } 
            li:nth-of-type(11) span{
                background-position:-400px 0;
            }
             li:nth-of-type(12) span{
                background-position:-160px 0;
            }
        }
    }
    #list:hover{
        & > ul{
            display:block;
        }
    }
}
#contentbox{
    width:100%;
    background:#f7f8f8;
    #content{
        width:1200px;
        margin:0 auto;
        padding-bottom:35px;
        .mr{
            float:left;
            margin:0 10px 10px 0;
        }
        .mr:nth-of-type(1),.mr:nth-of-type(5){
            margin-right:0;
        }
        .mr:hover{
            box-shadow: 1px 1px 5px #aaa,-1px -1px 5px #aaa;
        }
        #content_list{
            margin:10px 0 10px 0;
            height:35px;
            width:1198px;
            font-size:12px;
            line-height:34px;
            text-align:center;
            border:1px solid #c7c7c7;
            background:#f1f1f1;
            float:left;
            span{
                float:left;
                width:98px;
                height:35px;
                color:#909090;
                background:#eaeaea;
                i{
                    height:0px;
                    width:0px;
                    font-size:0;
                    border-left:9px solid #909090;
                    border-top:4px solid transparent;
                    border-bottom:4px solid transparent;
                    vertical-align: middle;
                    margin-right:2px;
                }
            }
            li{
                float:left;
                a{
                    color:#444;
                    padding:0 16px;
                    border-left:1px solid #444;
                }
            }
            li:nth-of-type(1){
                a{
                    border:none;
                }
            }
            li:hover{
                a{
                    color:#008842;
                    text-decoration: underline;
                }
            }
        }
        #content_sort{
            height:30px;
            width:1200px;
            float:left;
            padding:5px 0 5px 9px;
            margin:10px 0 15px 0;
            background:#eaeaea;
            span{
                display:inline-block;
                float:left;
                height:28px;
                line-height:28px;
                border:1px solid #c7c7c7;
                border-left:none;
                padding:0 10px;
                background:#fff;
            }
            span:nth-of-type(1){
                border-left:1px solid #c7c7c7;
            }
            .opton{
                background:#eaeaea;
            }
        }
        dl{
            float:left;
            width:290px;
            height:358px;
            background:#fff;
            margin:0 10px 15px 0;
            position:relative;
            dt{
                float:left;
                height:290px;
                width:290px;
                img{
                    height:290px;
                    width:290px;
                }
                span{
                   position:absolute;
                   top:231px;
                   left:0;
                   height:61px;
                   width:100%;
                   display:none;
                   h4{
                       height:36px;
                       width:100%;
                       text-align:center;
                       font-size:12px;
                       line-height:36px;
                       float:left;
                   } 
                   h5{
                       height:25px;
                       width:180px;
                       float:left;
                       color:#fff;
                       text-align:center;
                       line-height:24px;
                       margin-left:55px;
                       background:#008742;
                       border-radius:5px;
                   }
                   h5:hover{
                       background:#09964e;
                   }
                }
            }
            dd{
                float:left;
                height:56px;
                width:260px;
                padding:12px 20px 0 10px;
                h3{
                    line-height:12px;
                    font-size:12px;
                    a{
                        color:#444;
                    }
                    a:hover{
                        color:#008842;
                        text-decoration: underline;
                    }
                }
                h2{
                    font-size:16px;
                    line-height:44px;
                    font-weight:600;
                    color:#e7380d;
                }
            }
            h6{
                height:60px;
                width:60px;
                position:absolute;
                left:10px;
                top:10px;
                background:url(../img/new.png) no-repeat;
            }
        }
        dl:hover{
            span{
                display:block;
            }
        }
    }
}
